<template>
    <div class="apiRouterContainer">
        <div class="searchContainer">
            <ApiSearch />
        </div>
        <div class="insertContainer">
            <el-button type="primary" plain size="small" icon="PlusOutlined" @click="addApi()">添 加</el-button>
        </div>

        <div class="mainInfoContainer">
            <el-table
                :data="routerDataList.dataList"
                style="width: 100%; margin-bottom: 20px; margin-top: 20px;"
                row-key="id"
                border
                :stripe="true"
                :show-overflow-tooltip="true"
                max-height="70vh"
            >
                <el-table-column prop="name" label="路由名称" />
                <el-table-column prop="code" label="路由编码" />
                <el-table-column prop="applicationName" label="微服务" />
                <el-table-column prop="routePath" label="路由地址" />
                <el-table-column prop="predicates" label="断言" />
                <el-table-column prop="commonType" label="API是否租户共享" align="center">
                    <template #default="scope">
                        <el-switch v-model="scope.row.commonType" @change="updateShareApi(scope.row.commonType, scope.row.id)"/>
                    </template>
                </el-table-column>

                <el-table-column prop="filters" label="过滤" />
                <el-table-column prop="corsState" label="跨域状态" />
                <el-table-column align="center">
                    <template #header>
                        <span>操 作</span>
                    </template>
                    <template #default="scope">
                        <el-button size="small" type="success" @click="handleUpdate(scope.$index, scope.row)">修 改</el-button>
                        <el-button type="danger" size="small" @click="handleDelete(scope.$index, scope.row)">删 除</el-button>
                        <el-button type="warning" size="small" @click="handleAuthorisation(scope.$index, scope.row)">授 权</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <el-pagination
                v-model:current-page="routerDataList.pageIndex"
                v-model:page-size="routerDataList.pageSize"
                :small="false"
                :background="true"
                layout="prev, pager, next, jumper, sizes, total"
                :total="routerDataList.recordCount"
                @change="changePage"
                :page-sizes="[10, 20, 30, 50, 100, 200, 400]"
                style="float: right"
            />
        </div>

        <div>
            <AddApiDialog :apiForm="apiForm"/>
        </div>
        <div>
            <ApiDeleteDialog :deleteData="apiForm" header="删除菜单" body="是否确认删除?" />
        </div>
        <div>
            <ApiRoleAuthorisationDialog :apiRoleAuthorisation="apiRoleAuthorisation"/>
        </div>
    </div>
</template>

<script setup name="apiRouteManage" lang="ts">
import ApiSearch from '@/components/apiManage/ApiSearch.vue'
import AddApiDialog from "@/components/apiManage/AddApiDialog.vue";
import ApiDeleteDialog from "@/components/apiManage/ApiDeleteDialog.vue";
import ApiRoleAuthorisationDialog from "@/components/apiManage/ApiRoleAuthorisationDialog.vue";
import {createTag} from '@/utils/ywuCommon'
import {apiRouteInfoQuery, apiRouteUpdateShareInfo} from "@/request/api";
import {computed, ref} from "vue";
import {useRoute} from "vue-router";
import {useApiStore} from "@/stores/apiManage/api";
import {ElNotification} from "element-plus";

let apiForm = ref({
    id: '',
    name: '',
    code: '',
    routePath: '',
    corsState: '',
    predicates: '',
    filters: '',
    routeType: 'lb',
    routeServiceName: '',
    httpIp: '',
    timeOutNum: '',
    timeOut: false,
    applicationName: ''
});
let apiRoleAuthorisation = ref({});

let routerDataList = computed(() => {return useApiStore().routerDataList});
let apiSearchData = computed(() => {return useApiStore().apiSearchData});

// 查询api路由
apiRouteInfoQuery(apiSearchData.value).then(res => {
    if (res["code"] === '200') {
        useApiStore().resetRouterDataList(res.data);
    }
})

// 创建标签
let route = useRoute();
createTag(route);

function addApi() {
    apiForm.value = {
        id: '',
        name: '',
        code: '',
        routePath: '',
        corsState: '',
        predicates: '',
        filters: '',
        routeType: 'lb',
        routeServiceName: '',
        httpIp: '',
        timeOutNum: '',
        timeOut: false,
        applicationName: ''
    }
    useApiStore().resetAddOrUpdateDialog(true);
}

function handleUpdate(index, raw) {
    let routeType = "";
    let routeServiceName = "";
    let realRoutePath = "";
    let httpIp = "";
    if (raw.routePath.startsWith("lb")) {
        routeType = "lb";
        routeServiceName = raw.applicationName;
        realRoutePath = raw.routePath.replace("lb://" + routeServiceName, "");
    } else if (raw.startsWith("http")) {
        routeType = "http";
        let newStr = raw.routePath.replace("http://", "");
        let index = newStr.indexOf("/")
        httpIp = newStr.substring(0, index);
        realRoutePath = raw.replace("http://" + httpIp, "");
    }
    apiForm.value = {
        id: raw.id,
        name: raw.name,
        code: raw.code,
        routePath: realRoutePath,
        corsState: raw.corsState,
        predicates: raw.predicates,
        routeType: routeType,
        routeServiceName: routeServiceName,
        httpIp: httpIp,
        filters: raw.filters,
        timeOut: raw.timeOut,
        timeOutNum: raw.timeOutNum,
        applicationName: raw.applicationName
    }
    useApiStore().resetAddOrUpdateDialog(true);
}

function handleDelete(index, raw) {
    let routeType = "";
    let routeServiceName = "";
    let realRoutePath = "";
    let httpIp = "";
    if (raw.routePath.startsWith("lb")) {
        routeType = "lb";
        routeServiceName = raw.applicationName;
        realRoutePath = raw.routePath.replace("lb://" + routeServiceName, "");
    } else if (raw.startsWith("http")) {
        routeType = "http";
        let newStr = raw.routePath.replace("http://", "");
        let index = newStr.indexOf("/")
        httpIp = newStr.substring(0, index);
        realRoutePath = raw.replace("http://" + httpIp, "");
    }
    apiForm.value = {
        id: raw.id,
        name: raw.name,
        code: raw.code,
        routePath: realRoutePath,
        corsState: raw.corsState,
        predicates: raw.predicates,
        routeType: routeType,
        routeServiceName: routeServiceName,
        httpIp: httpIp,
        filters: raw.filters,
        timeOut: raw.timeOut,
        timeOutNum: raw.timeOutNum,
        applicationName: raw.applicationName
    }
    useApiStore().resetDeleteApiDialog(true);
}

function changePage(index, size) {
    apiSearchData.value["pageInfo"] = {
        pageIndex: index,
        pageSize: size
    };
    apiRouteInfoQuery(apiSearchData.value).then(res => {
        if (res["code"] === '200') {
            useApiStore().resetRouterDataList(res.data);
        }
    })
}

function handleAuthorisation(index, raw) {
    apiRoleAuthorisation.value = raw;
    useApiStore().resetApiRoleAuthorisationDialog(true);
}

function updateShareApi(value, id) {
    let requestParam = {
        id: id,
        commonType: value
    }
    apiRouteUpdateShareInfo(requestParam).then(res => {
        if (res["code"] === "200") {
            ElNotification({
                title: 'Success',
                message: res["message"],
                type: 'success'
            })
        }
    });
}
</script>

<style scoped lang="less">
.apiRouterContainer {
    width: 100%;
    height: 100%;
    .searchContainer {
        padding-top: 0.5%;
        padding-bottom: 0.5%;
        width: 98%;
        display: flex;
        align-items: center;
    }
    .insertContainer {
        width: 98%;
        height: 2%;
        display: flex;
        align-items: center;
        margin-left: 1%;
        padding-top: 0.5%;
    }
    .mainInfoContainer {
        width: 98%;
        height: 91%;
        margin-left: 1%;
    }
}
</style>